<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖动滑块验证</title>
</head>
<body>
	<meta charset="utf8">
	<style>
/* 滑动控件容器,灰色背景 */
#dragContainer {
	position: relative;
	display: inline-block;
	background: #e8e8e8;
	width: 300px;
	height: 33px;
	border: 2px solid #e8e8e8;
}
/* 滑块左边部分,绿色背景 */
#dragBg {
	position: absolute;
	background-color: #7ac23c;
	width: 0px;
	height: 100%;
}
/* 滑动验证容器文本 */
#dragText {
	position: absolute;
	width: 100%;
	height: 100%;
	/* 文字水平居中 */
	text-align: center;
	/* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
	line-height: 33px;
	/* 文本不允许选中 */
	user-select: none;
	-webkit-user-select: none;
}
/* 滑块 */
#dragHandler {
	position: absolute;
	width: 40px;
	height: 100%;
	cursor: move;
}
/* 滑块初始背景 */
.dragHandlerBg {
	background: #fff no-repeat center
		url("");
}
/* 验证成功时的滑块背景 有√*/
.dragHandlerOkBg {
	background: #fff no-repeat center
		url("");
}
</style>
	<script>
		//加载（事件会在页面加载完成后触发）
		window.onload = function() {
			//获取滑动控件容器,灰色背景
			var dragContainer = document.getElementById("dragContainer");
			//获取滑块左边部分,绿色背景
			var dragBg = document.getElementById("dragBg");
			//获取滑动验证容器文本
			var dragText = document.getElementById("dragText");
			//获取滑块
			var dragHandler = document.getElementById("dragHandler");

			//滑块的最大偏移量                 =     滑动验证容器文本长度                  -      滑块长度
			var maxHandlerOffset = dragContainer.clientWidth
					- dragHandler.clientWidth;
			//是否验证成功的标记
			var isVertifySucc = false;

			initDrag();

			function initDrag() {
				//在滑动验证容器文本写入“拖动滑块验证”
				dragText.textContent = "拖动滑块验证";
				//给滑块添加鼠标按下监听
				dragHandler.addEventListener("mousedown",
						onDragHandlerMouseDown);
			}

			//选中滑块
			function onDragHandlerMouseDown() {
				//鼠标移动监听
				document.addEventListener("mousemove", onDragHandlerMouseMove);
				//鼠标松开监听
				document.addEventListener("mouseup", onDragHandlerMouseUp);
			}

			//滑块移动
			function onDragHandlerMouseMove() {
				/*
				html元素不存在width属性,只有clientWidth
				offsetX是相对当前元素的,clientX和pageX是相对其父元素的
				 */
				//滑块移动量
				var left = event.clientX - dragHandler.clientWidth / 2;
				//
				if (left < 0) {
					left = 0;
					//如果滑块移动量   > 滑块的最大偏移量 ，则调用验证成功函数
				} else if (left > maxHandlerOffset) {
					left = maxHandlerOffset;
					verifySucc();
				}
				//滑块移动量
				dragHandler.style.left = left + "px";
				//绿色背景的长度
				dragBg.style.width = dragHandler.style.left;
			}

			//松开滑块函数
			function onDragHandlerMouseUp() {
				//移除鼠标移动监听
				document.removeEventListener("mousemove",
						onDragHandlerMouseMove);
				//移除鼠标松开监听
				document.removeEventListener("mouseup", onDragHandlerMouseUp);
				//初始化滑块移动量
				dragHandler.style.left = 0;
				//初始化绿色背景
				dragBg.style.width = 0;
			}

			//验证成功
			function verifySucc() {
				//成功标记，不可回弹
				isVertifySucc = false;
				//容器文本的文字改为白色“验证通过”字体
				dragText.textContent = "验证通过";
				dragText.style.color = "white";
				//验证通过的滑块背景
				dragHandler.setAttribute("class", "dragHandlerOkBg");
				//移除鼠标按下监听
				dragHandler.removeEventListener("mousedown",
						onDragHandlerMouseDown);
				//移除 鼠标移动监听
				document.removeEventListener("mousemove",
						onDragHandlerMouseMove);
				//移除鼠标松开监听
				document.removeEventListener("mouseup", onDragHandlerMouseUp);
				return true;
			}
			;
		}
	</script>
</head>
<body>
	<div id="dragContainer">
		<!-- 容器初始背景 -->
		<div id="dragBg"></div>
		<!-- 绿色背景 -->
		<div id="dragText"></div>
		<!-- 滑动容器文本 -->
		<div id="dragHandler" class="dragHandlerBg"></div>
	</div>
	<!--    滑块         滑块初始背景 -->
</body>
</html>
